<script setup>

import { ref, onMounted } from 'vue'
import { Modal, message } from "ant-design-vue";
import EditorCom from "@/components/EditorCom/index.vue";
import * as Api from "@req/api";
import { suc } from "@/utils";
const form = ref({
  title: '',
  rightContent: '',
  leftContent: ''
})
const isEdit = ref(false)
const hbId = ref(null)
const hbInfo = ref({})
const key = 'updatable'


onMounted(() => {
  getConfigList()
})


const getConfigList = () => {
  message.loading({ content: 'Loading...', key });
  Api.getBlogsList({ blog_type: 'config' }).then((res) => {
    if (suc(res.status)) {
      const resList = res.data.blogs
      resList.map((item) => {
        if (item.title == 'home_blog') {
          hbId.value = item.id
          hbInfo.value = JSON.parse(item.content)
          message.success({ content: 'Loaded!', key });
        }
      })
    }
  });
}

const handleSubmit = () => {
  Modal.confirm({
    title: "确认编辑？",
    content: "编辑后内容会即刻更新",
    okText: "确认",
    cancelText: "取消",
    onOk() {
      message.loading({ content: 'Loading...', key });
      hbInfo.value = form.value
      let data = {
        title: 'home_blog',
        content: JSON.stringify(form.value)
      }
      allSubmit(hbId.value, data)
    },
  });
}

const allSubmit = (id, data) => {
  const resFun = (res) => {
    if (suc(res.status)) {
      message.success({ content: res.message, key });
      handleClose()
      getConfigList()
    } else {
      message.error({ content: 'error', key });
    }
  }
  if (id) {
    Api.editBlog(id, data).then((res) => {
      resFun(res)
    });
  } else {
    data['author'] = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')).username : ''
    data['blog_type'] = 'config'
    Api.addBlog(data).then((res) => {
      resFun(res)
    })

  }
}


const handleEdit = () => {
  message.loading({ content: 'Loading...', key });
  isEdit.value = true
  setTimeout(() => {
    form.value = JSON.parse(JSON.stringify(hbInfo.value))
    message.success({ content: 'Loaded!', key });
  }, 500)
}

const handleClose = () => {
  isEdit.value = false
  form.value = {
    title: '',
    rightContent: '',
    leftContent: ''
  }
}
</script>

<template>
  <div class="box">
    <div style="margin-bottom: 16px;font-size: 22px;font-weight: bold;">首页博客配置</div>
    <div class="item">
      <span class="label">标题：</span>
      <a-input v-model:value="hbInfo.title" v-if="!isEdit" disabled />
      <a-input v-model:value="form.title" v-else />
    </div>
    <div style="display: flex;margin-top: 20px;">
      <div class="item col">
        <span class="label">左内容：</span>
        <EditorCom :value="form.leftContent" v-if="isEdit" @changeValue="(val) => { form.leftContent = val }" />
        <div class="content" v-else v-html="hbInfo.leftContent"></div>
      </div>
      <div class="item col">
        <span class="label">右内容：</span>
        <EditorCom :value="form.rightContent" v-if="isEdit" @changeValue="(val) => { form.rightContent = val }" />
        <div class="content" v-else v-html="hbInfo.rightContent"></div>
      </div>
    </div>
    <div class="btn-group">
      <a-button @click="handleClose" v-if="isEdit">取消</a-button>
      <a-button type="primary" @click="handleSubmit" v-if="isEdit">保存</a-button>
      <a-button type="primary" @click="handleEdit" v-if="!isEdit">编辑</a-button>
    </div>
  </div>
</template>

<style scoped lang="postcss">
.box {
  padding: 16px;

  .item {
    display: flex;
    align-items: center;

    .label {
      display: block;
      flex: 0 0 70px;
      height: 24px;
      line-height: 24px;
      margin-right: 10px;
      text-align: right;
    }

    &.col {
      width: 49%;
      flex-direction: column;
      align-items: start;

      &:last-child {
        margin-left: auto;
      }

      .label {
        width: 70px;
        flex: 0 0 48px;
      }
    }
  }

  .btn-group {
    text-align: right;
    margin-top: 20px;

    .ant-btn {
      margin-left: 10px;
    }
  }

  .content {
    min-height: 500px;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }
}
</style>